<template>
  <div class="lowcode-home">
    <!-- 顶部横幅 -->
    <div class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">
          <el-icon class="hero-icon"><MagicStick /></el-icon>
          低代码开发平台
        </h1>
        <p class="hero-subtitle">AI驱动·可视化设计·快速开发·零代码门槛</p>
        <div class="hero-stats">
          <div class="stat-item">
            <div class="stat-number">13</div>
            <div class="stat-label">核心功能</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">80%</div>
            <div class="stat-label">效率提升</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">3分钟</div>
            <div class="stat-label">快速搭建</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">100+</div>
            <div class="stat-label">组件库</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速开始 -->
    <div class="section">
      <div class="section-header">
        <h2>
          <el-icon><Lightning /></el-icon>
          快速开始
        </h2>
        <p>选择一种方式快速开始你的低代码之旅</p>
      </div>
      <div class="quick-start-grid">
        <el-card class="quick-card primary" shadow="hover" @click="navigateTo('/lowcode/quick-builder')">
          <div class="quick-icon">
            <el-icon><MagicStick /></el-icon>
          </div>
          <h3>快速搭建向导</h3>
          <p>3分钟零代码搭建完整应用</p>
          <el-tag type="danger" size="small">推荐新手</el-tag>
        </el-card>

        <el-card class="quick-card success" shadow="hover" @click="navigateTo('/lowcode/ai-assistant')">
          <div class="quick-icon">
            <el-icon><ChatDotSquare /></el-icon>
          </div>
          <h3>AI智能助手</h3>
          <p>用自然语言描述需求，AI生成应用</p>
          <el-tag type="success" size="small">最智能</el-tag>
        </el-card>

        <el-card class="quick-card warning" shadow="hover" @click="navigateTo('/lowcode/template-market')">
          <div class="quick-icon">
            <el-icon><Grid /></el-icon>
          </div>
          <h3>模板广场</h3>
          <p>海量精品模板，一键使用</p>
          <el-tag type="warning" size="small">最快速</el-tag>
        </el-card>

        <el-card class="quick-card info" shadow="hover" @click="navigateTo('/lowcode/code-generator')">
          <div class="quick-icon">
            <el-icon><Document /></el-icon>
          </div>
          <h3>代码生成器</h3>
          <p>智能生成高质量代码</p>
          <el-tag type="info" size="small">开发者</el-tag>
        </el-card>
      </div>
    </div>

    <!-- 核心功能 -->
    <div class="section">
      <div class="section-header">
        <h2>
          <el-icon><Grid /></el-icon>
          核心功能
        </h2>
        <p>13个强大功能模块，满足所有开发需求</p>
      </div>
      <div class="features-grid">
        <el-card 
          v-for="feature in features" 
          :key="feature.path"
          class="feature-card"
          shadow="hover"
          @click="navigateTo(feature.path)"
        >
          <div class="feature-header">
            <div class="feature-icon" :style="{ background: feature.color }">
              <el-icon><component :is="feature.icon" /></el-icon>
            </div>
            <el-tag v-if="feature.badge" :type="feature.badgeType" size="small">{{ feature.badge }}</el-tag>
          </div>
          <h3>{{ feature.name }}</h3>
          <p>{{ feature.description }}</p>
          <div class="feature-tags">
            <el-tag v-for="tag in feature.tags" :key="tag" size="small" effect="plain">{{ tag }}</el-tag>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 使用场景 -->
    <div class="section">
      <div class="section-header">
        <h2>
          <el-icon><Suitcase /></el-icon>
          适用场景
        </h2>
        <p>覆盖企业80%的标准化开发需求</p>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="scenario-card" shadow="hover">
            <div class="scenario-icon">
              <el-icon><Document /></el-icon>
            </div>
            <h3>表单页面</h3>
            <ul>
              <li>数据录入表单</li>
              <li>信息登记表</li>
              <li>申请审批表</li>
              <li>调查问卷</li>
            </ul>
            <div class="scenario-time">⚡ 15分钟完成</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="scenario-card" shadow="hover">
            <div class="scenario-icon">
              <el-icon><DataAnalysis /></el-icon>
            </div>
            <h3>CRUD页面</h3>
            <ul>
              <li>数据列表管理</li>
              <li>增删改查操作</li>
              <li>搜索筛选导出</li>
              <li>批量操作</li>
            </ul>
            <div class="scenario-time">⚡ 30分钟完成</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="scenario-card" shadow="hover">
            <div class="scenario-icon">
              <el-icon><Connection /></el-icon>
            </div>
            <h3>工作流程</h3>
            <ul>
              <li>审批流程</li>
              <li>业务流转</li>
              <li>状态管理</li>
              <li>消息通知</li>
            </ul>
            <div class="scenario-time">⚡ 1小时完成</div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 学习资源 -->
    <div class="section">
      <div class="section-header">
        <h2>
          <el-icon><Reading /></el-icon>
          学习资源
        </h2>
        <p>从新手到专家，一站式学习资源</p>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="resource-card" shadow="hover">
            <el-icon class="resource-icon"><Document /></el-icon>
            <h3>快速入门</h3>
            <p>5分钟了解平台核心功能</p>
            <el-button type="primary" text>开始学习</el-button>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="resource-card" shadow="hover">
            <el-icon class="resource-icon"><VideoCamera /></el-icon>
            <h3>视频教程</h3>
            <p>手把手教你使用各个功能</p>
            <el-button type="primary" text>观看视频</el-button>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="resource-card" shadow="hover">
            <el-icon class="resource-icon"><Collection /></el-icon>
            <h3>最佳实践</h3>
            <p>学习经典案例和开发技巧</p>
            <el-button type="primary" text>查看案例</el-button>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="resource-card" shadow="hover">
            <el-icon class="resource-icon"><QuestionFilled /></el-icon>
            <h3>常见问题</h3>
            <p>快速解决使用中的问题</p>
            <el-button type="primary" text>查看FAQ</el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 最近项目 -->
    <div class="section" v-if="recentProjects.length > 0">
      <div class="section-header">
        <h2>
          <el-icon><Clock /></el-icon>
          最近项目
        </h2>
        <el-button type="primary" text @click="navigateTo('/lowcode/applications')">
          查看全部
          <el-icon><ArrowRight /></el-icon>
        </el-button>
      </div>
      <div class="projects-grid">
        <el-card 
          v-for="project in recentProjects" 
          :key="project.id"
          class="project-card"
          shadow="hover"
        >
          <div class="project-header">
            <div class="project-icon">
              <el-icon><component :is="project.icon" /></el-icon>
            </div>
            <el-tag :type="project.statusType" size="small">{{ project.status }}</el-tag>
          </div>
          <h3>{{ project.name }}</h3>
          <p>{{ project.description }}</p>
          <div class="project-footer">
            <span class="project-time">{{ project.updateTime }}</span>
            <div class="project-actions">
              <el-button type="primary" text size="small">编辑</el-button>
              <el-button type="info" text size="small">预览</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 统计数据 -->
    <div class="section">
      <div class="section-header">
        <h2>
          <el-icon><DataLine /></el-icon>
          平台数据
        </h2>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-card-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
              <el-icon><Grid /></el-icon>
            </div>
            <div class="stat-card-content">
              <div class="stat-card-value">{{ statistics.totalApps }}</div>
              <div class="stat-card-label">已创建应用</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-card-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
              <el-icon><Edit /></el-icon>
            </div>
            <div class="stat-card-content">
              <div class="stat-card-value">{{ statistics.totalForms }}</div>
              <div class="stat-card-label">表单设计</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-card-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
              <el-icon><Connection /></el-icon>
            </div>
            <div class="stat-card-content">
              <div class="stat-card-value">{{ statistics.totalFlows }}</div>
              <div class="stat-card-label">流程设计</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-card-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
              <el-icon><MagicStick /></el-icon>
            </div>
            <div class="stat-card-content">
              <div class="stat-card-value">{{ statistics.aiGenerations }}</div>
              <div class="stat-card-label">AI生成次数</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import {
  MagicStick, Lightning, ChatDotSquare, Grid, Document, 
  DataAnalysis, Connection, Suitcase, Reading, VideoCamera,
  Collection, QuestionFilled, Clock, ArrowRight, DataLine,
  Edit, Box, Files, FolderOpened, Share, User, OfficeBuilding, 
  Location, TrendCharts, Setting
} from '@element-plus/icons-vue'

const router = useRouter()

// 核心功能列表
const features = [
  {
    name: 'AI智能助手',
    path: '/lowcode/ai-assistant',
    icon: 'MagicStick',
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    description: '自然语言生成应用，AI驱动开发',
    badge: 'HOT',
    badgeType: 'danger',
    tags: ['AI', '智能', '自然语言']
  },
  {
    name: '表单设计器',
    path: '/lowcode/form-designer',
    icon: 'Edit',
    color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    description: '拖拽式表单设计，30+组件',
    badge: 'NEW',
    badgeType: 'success',
    tags: ['拖拽', '可视化', '表单']
  },
  {
    name: '页面设计器',
    path: '/lowcode/page-designer',
    icon: 'Document',
    color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    description: '可视化页面设计，响应式布局',
    tags: ['页面', '响应式', '设计']
  },
  {
    name: '流程设计器',
    path: '/lowcode/flow-designer',
    icon: 'Share',
    color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    description: '可视化流程图，审批流程设计',
    tags: ['流程', '审批', '工作流']
  },
  {
    name: 'API设计器',
    path: '/lowcode/api-designer',
    icon: 'Connection',
    color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    description: 'RESTful API设计，SQL智能提示',
    badge: 'HOT',
    badgeType: 'danger',
    tags: ['API', 'SQL', 'REST']
  },
  {
    name: '数据模型',
    path: '/lowcode/model-designer',
    icon: 'Box',
    color: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)',
    description: '数据库表设计，字段类型配置',
    tags: ['数据', '模型', '数据库']
  },
  {
    name: '代码生成器',
    path: '/lowcode/code-generator',
    icon: 'Document',
    color: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
    description: '智能代码生成，多框架支持',
    tags: ['代码', '生成器', '智能']
  },
  {
    name: '快速搭建',
    path: '/lowcode/quick-builder',
    icon: 'Lightning',
    color: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
    description: '3分钟快速搭建完整应用',
    badge: '推荐',
    badgeType: 'warning',
    tags: ['快速', '向导', '零代码']
  },
  {
    name: '组件市场',
    path: '/lowcode/component-market',
    icon: 'Grid',
    color: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
    description: '海量组件资源，一键安装',
    tags: ['组件', '市场', '资源']
  },
  {
    name: '模板广场',
    path: '/lowcode/template-market',
    icon: 'FolderOpened',
    color: 'linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 100%)',
    description: '精品模板库，快速应用',
    tags: ['模板', '精品', '广场']
  },
  {
    name: '应用管理',
    path: '/lowcode/applications',
    icon: 'Grid',
    color: 'linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%)',
    description: '应用列表，版本管理',
    tags: ['应用', '管理', '版本']
  },
  {
    name: '组件库',
    path: '/lowcode/component-library',
    icon: 'Box',
    color: 'linear-gradient(135deg, #f77062 0%, #fe5196 100%)',
    description: '自定义组件，组件发布',
    tags: ['组件', '自定义', '库']
  },
  {
    name: '模板中心',
    path: '/lowcode/templates',
    icon: 'Files',
    color: 'linear-gradient(135deg, #c471f5 0%, #fa71cd 100%)',
    description: '模板浏览，分类搜索',
    tags: ['模板', '中心', '分类']
  }
]

// 最近项目
const recentProjects = ref([
  {
    id: 1,
    name: '员工管理系统',
    description: '完整的员工信息管理CRUD应用',
    icon: 'User',
    status: '开发中',
    statusType: 'warning',
    updateTime: '2小时前'
  },
  {
    id: 2,
    name: '采购管理',
    description: '采购申请和审批流程应用',
    icon: 'Document',
    status: '已发布',
    statusType: 'success',
    updateTime: '昨天'
  },
  {
    id: 3,
    name: '销售报表',
    description: '销售数据统计和可视化',
    icon: 'TrendCharts',
    status: '测试中',
    statusType: 'info',
    updateTime: '3天前'
  }
])

// 统计数据
const statistics = reactive({
  totalApps: 15,
  totalForms: 32,
  totalFlows: 18,
  aiGenerations: 156
})

// 路由跳转
const navigateTo = (path) => {
  router.push(path)
}
</script>

<style scoped>
.lowcode-home {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 40px;
}

/* 英雄区域 */
.hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 60px 40px;
  margin-bottom: 40px;
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.hero-title {
  font-size: 48px;
  font-weight: bold;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.hero-icon {
  font-size: 52px;
}

.hero-subtitle {
  font-size: 20px;
  margin: 0 0 40px 0;
  opacity: 0.95;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
}

/* 区域样式 */
.section {
  max-width: 1200px;
  margin: 0 auto 50px;
  padding: 0 20px;
}

.section-header {
  text-align: center;
  margin-bottom: 30px;
}

.section-header h2 {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
  margin: 0 0 10px 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.section-header p {
  font-size: 16px;
  color: #909399;
  margin: 0;
}

/* 快速开始网格 */
.quick-start-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.quick-card {
  text-align: center;
  padding: 30px 20px;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.quick-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.quick-card.primary {
  border-color: #409eff;
}

.quick-card.success {
  border-color: #67c23a;
}

.quick-card.warning {
  border-color: #e6a23c;
}

.quick-card.info {
  border-color: #909399;
}

.quick-icon {
  font-size: 48px;
  margin-bottom: 15px;
  color: #409eff;
}

.quick-card.success .quick-icon {
  color: #67c23a;
}

.quick-card.warning .quick-icon {
  color: #e6a23c;
}

.quick-card.info .quick-icon {
  color: #909399;
}

.quick-card h3 {
  font-size: 18px;
  margin: 0 0 10px 0;
  color: #303133;
}

.quick-card p {
  font-size: 14px;
  color: #909399;
  margin: 0 0 15px 0;
}

/* 功能网格 */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.feature-card {
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #e4e7ed;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  border-color: #409eff;
}

.feature-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.feature-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.feature-card h3 {
  font-size: 18px;
  margin: 0 0 10px 0;
  color: #303133;
}

.feature-card p {
  font-size: 14px;
  color: #909399;
  margin: 0 0 15px 0;
  line-height: 1.6;
}

.feature-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* 场景卡片 */
.scenario-card {
  text-align: center;
  padding: 30px 20px;
  height: 100%;
}

.scenario-icon {
  font-size: 48px;
  color: #409eff;
  margin-bottom: 15px;
}

.scenario-card h3 {
  font-size: 20px;
  margin: 0 0 20px 0;
  color: #303133;
}

.scenario-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  text-align: left;
}

.scenario-card li {
  padding: 8px 0;
  color: #606266;
  font-size: 14px;
}

.scenario-card li:before {
  content: '✓ ';
  color: #67c23a;
  font-weight: bold;
  margin-right: 5px;
}

.scenario-time {
  font-size: 14px;
  color: #409eff;
  font-weight: bold;
}

/* 资源卡片 */
.resource-card {
  text-align: center;
  padding: 30px 20px;
  height: 100%;
}

.resource-icon {
  font-size: 48px;
  color: #409eff;
  margin-bottom: 15px;
}

.resource-card h3 {
  font-size: 18px;
  margin: 0 0 10px 0;
  color: #303133;
}

.resource-card p {
  font-size: 14px;
  color: #909399;
  margin: 0 0 20px 0;
}

/* 项目网格 */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.project-card {
  padding: 20px;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.project-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.project-card h3 {
  font-size: 16px;
  margin: 0 0 8px 0;
  color: #303133;
}

.project-card p {
  font-size: 14px;
  color: #909399;
  margin: 0 0 15px 0;
}

.project-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #e4e7ed;
}

.project-time {
  font-size: 12px;
  color: #c0c4cc;
}

.project-actions {
  display: flex;
  gap: 10px;
}

/* 统计卡片 */
.stat-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
}

.stat-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  flex-shrink: 0;
}

.stat-card-content {
  flex: 1;
}

.stat-card-value {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-card-label {
  font-size: 14px;
  color: #909399;
}

/* 响应式 */
@media (max-width: 1200px) {
  .quick-start-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 32px;
  }
  
  .hero-subtitle {
    font-size: 16px;
  }
  
  .hero-stats {
    flex-wrap: wrap;
    gap: 30px;
  }
  
  .quick-start-grid {
    grid-template-columns: 1fr;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
}
</style>

